<template>
  <view class="account-cancellation">
    <div class="content">
      <block v-if="step === 1">
        <text>
          {{$t('如您注销本号，将无法登录该账号且部分留存的信息将被清空无法找回，具体包括但不限于以下信息')}}：
        </text>
        <view class="ul">
          <view class="li">{{$t('个人资料')}}</view>
          <view class="li">{{$t('个人指纹信息')}}</view>
          <view class="li">{{$t('印章柜关联的个人信息和人脸图片')}}</view>
          <view class="li">{{$t('门禁设备关联的个人信息和人脸图片')}}</view>
          <view class="li">{{$t('其他设备关联的个人信息和人脸图片')}}</view>
        </view>
        <text>{{$t('同时，该账号的相关管理权限将会变更，具体包括但 不限于以下内容')}}：</text>
        <view class="ul">
          <view class="li">{{$t('参与的审批流程被禁用')}}</view>
          <view class="li">{{$t('组织机构主管职位移交至该账号所在部门/组织的上级主管人员')}}</view>
          <view class="li">{{$t('申请单审批/授权/审计权限移交至该账号所在部门/组织的上级主管人员')}}</view>
          <view class="li">{{$t('名下设备的管理权限移交至该账号所在部门/组织的上级主管人员')}}</view>
        </view>
      </block>

      <block v-if="step === 2">
        <block v-if="!verifyMode">
          <span>{{$t('请选择验证方式注销账号(2选1)')}}</span>
          <block v-for="btn in verifyModeList" :key="btn.value">
            <view style="height: 30rpx" />
            <view class="btn" @click="modePicker(btn.value)">
              <view class="content" style="justify-content: center">{{ btn.name }}</view>
              <uni-icons size="20" type="right"></uni-icons>
            </view>
          </block>
        </block>
        <block v-if="verifyMode === 'pass'">
          <span>{{$t('请输入密码注销账号')}}</span>
          <view style="height: 30rpx" />
          <view class="input">
            <view class="title">{{$t('登录名')}}</view>
            <view class="value">{{ loginName | encryptedName }}</view>
          </view>
          <view style="height: 30rpx" />
          <view class="input">
            <view class="title">{{$t('密码')}}</view>
            <view class="value">
              <input v-model="password" class="uni-input" password :placeholder="$t('请输入密码')" />
            </view>
          </view>
        </block>
        <block v-if="verifyMode === 'code'">
          <span>{{$t('请输入验证码注销账号')}}</span>
          <view style="height: 30rpx" />
          <view class="input">
            <view class="title">{{$t('手机号码')}}</view>
            <view class="value">{{ phoneNum | encryptedCell }}</view>
          </view>
          <view style="height: 30rpx" />
          <view class="input">
            <view class="title">{{$t('验证码')}}</view>
            <view class="value">
              <input v-model="code" class="uni-input" :placeholder="$t('请输入验证码')" />
            </view>
            <view class="right">
              <view class="send-text">
                <text @click="sendCode">
                  {{ countDown === countDownDefault ? $t('发送验证码') : `${$t('重新发送')}${countDown}S` }}
                </text>
              </view>
            </view>
          </view>
        </block>
      </block>
    </div>
    <button v-if="step === 1" style="width: 100%" type="warn" @click="toStep(2)">
      {{$t('已清楚风险，确定注销')}}
    </button>
    <button v-if="step === 2" style="width: 100%" type="warn" @click="cancelHandle">
      {{$t('确认注销')}}
    </button>
  </view>
</template>

<script>
import { encryptedName, encryptedCell } from '@/common/util.js'
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: { ...mapGetters(['userInfo', 'api']) },
  onUnload() {
    if (this.timer) {
      this.clearTimer()
    }
  },
  data() {
    return {
      step: 1, //1:提示，2:注销方式，3:注销
      verifyMode: '', // 'pass' || 'code'
      verifyModeList: [
        {
          name: this.$t('登录名+密码'),
          value: 'pass'
        },
        {
          name: this.$t('手机号+验证码'),
          value: 'code'
        }
      ],
      code: '',
      password: '',
      countDownDefault: 60,
      countDown: 60,
      timer: null,
      loginName: '',
      phoneNum: ''
    }
  },
  filters: {
    encryptedName(val) {
      return encryptedName(val)
    },
    encryptedCell(val) {
      return encryptedCell(val)
    }
  },
  mounted() {
    uni.setNavigationBarTitle({title: this.$t('注销账号')})
    this.phoneNum = JSON.parse(JSON.stringify(this.userInfo.phone))
    this.loginName = JSON.parse(JSON.stringify(this.userInfo.loginName))
  },
  methods: {
    ...mapActions(['remove_logout']),
    sendCode() {
      if (this.countDown !== this.countDownDefault) {
        return
      }
      this.getPhoneCode()
    },
    getPhoneCode() {
      let req = {
        phone: this.phoneNum,
        num: 6
      }
      this.$u.get(this.api.GLOBAL_app_logout_getPhoneCode, req).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: this.$t('验证码已发送')
          })
          this.countDownReduce()
        }
      })
    },
    countDownReduce() {
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
        } else {
          this.clearTimer()
          this.countDown = this.countDownDefault
        }
      }, 1000)
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
    modePicker(mode) {
      this.verifyMode = mode
    },
    toStep(n) {
      uni.showModal({
        title: '',
        content: this.$t('账号注销后将无法找回，部分留存的信息无法查看。确定注销账号吗') + '？',
        cancelText: this.$t('我再想想'),
        cancelColor: '#007aff',
        confirmText: this.$t('继续注销'),
        confirmColor: '#e64340',
        success: (res) => {
          if (res.confirm) {
            this.step = n
          }
        }
      })
    },
    cancelHandle() {
      if (this.userInfo && this.userInfo.appV1) {
        switch (this.verifyMode) {
          case 'pass':
            if (!this.password) {
              uni.showToast({
                title: this.$t('请输入密码'),
                icon: 'error'
              })
              return
            }
            //console.log('密码方式注销')
            this.passwordFn()
            //console.log('loginName', this.loginName)
            //console.log('password', this.password)
            break
          case 'code':
            if (!this.code) {
              uni.showToast({
                title: this.$t('请输入验证码'),
                icon: 'error'
              })
              return
            }
            this.codeFn()
            break
        }
      } else {
        uni.showToast({
          title: this.$t('当前服务器不支持注销功能'),
          icon: 'none'
        })
      }
    },
    codeFn() {
      let req = {
        phone: this.phoneNum,
        code: this.code
      }
      this.$u.get(this.api.GLOBAL_app_logout_logoutValidation, req).then((res) => {
        if (res.code === 200) {
          this.userCance()
        }
      })
    },
    passwordFn() {
      let req = {
        username: this.loginName,
        password: this.password
      }
      this.$u.get(this.api.GLOBAL_app_logout_logoutUsernameValidation, req).then((res) => {
        if (res.code === 200) {
          this.userCance()
        }
      })
    },
    userCance() {
      this.$u.post(this.api.GLOBAL_auth_user_cancel, {}).then((res) => {
        if (res.code === 200) {
          //用户退出
          this.remove_logout()
          uni.reLaunch({
            url: '../template/login/login'
          })
          setTimeout(() => {
            uni.showToast({
              title: this.$t('注销成功')
            })
          }, 2000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-cancellation {
  height: 100%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .ul {
      margin: 30rpx 0;

      .li {
        &::before {
          content: '';
          display: inline-block;
          margin-right: 10rpx;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #000;
        }
      }
    }

    .btn {
      padding: 30rpx;
      border: 1rpx solid #797979;
      border-radius: 6rpx;
      display: flex;
      align-items: center;

      .content {
        flex: 1;
        display: flex;
      }
    }

    .input {
      padding: 30rpx;
      border: 1rpx solid #797979;
      border-radius: 6rpx;
      display: flex;
      align-items: center;

      .title {
        width: 200rpx;
      }

      .value {
        flex: 1;
      }

      .right {
        white-space: nowrap;

        .send-text {
          width: 170rpx;
          text-align: right;
        }
      }
    }
  }
}
</style>
